<template>
	<view class="main" :style="'top:'+(-demo.height-demo.top-10)+'px'">
		<view :style="'padding-top:'+(demo.height+demo.top+10)+'px'">
			<head1 class="nav_top"
				:style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10px'"
				:nav="title">
			</head1>
		</view>
		<view class="index_line">

		</view>
		<view class="realTime">
			<view class="realTimeTit">{{newDetail.title}}</view>
			<!-- <view class="realTimeBot">
				<text>{{newDetail.createTime}}</text>
				<image src="../../static/icon/yanjing.png" mode=""></image>
				<text>{{newDetail.rows}}</text>
			</view> -->
			<view class="line"></view>
			<view class="actile">
				<!-- {{newDetail.context}} -->
				<rich-text :nodes="newDetail.context" space="true"></rich-text>
			</view>

		</view>
		<view class="pinglun">
			<view class="pinglun_title">精彩评论</view>
			<view class="pinglun_main" v-for="(item,index) in contentList" :key='index'>
				<view class="pinglun_main_left">
					<image src="../../static/icon/fabu.png" mode=""></image>
					<view class="pinglun_main_lr">
						<view class="t_tit">{{item.nick}}</view>
						<view class="t_content">
							{{item.content}}
						</view>
					</view>
				</view>
				<view class="pinglun_main_right">
					<image v-if="item.status==''" @click="dianzanInfoList(item,index)" src="../../static/icon/dz.png"
						mode=""></image>
					<image v-if="item.status!=''" src="../../static/icon/active_dz.png" mode=""></image>
					</image>
					<text>{{item.rows}}</text>
				</view>
			</view>
			<view class="pinglun_footer">
				<textarea value="" v-model="content" placeholder="写评论" />
				<view @click="addpinglun(content)">发表</view>
			</view>
		</view>
		<view class="detail_footer">
			<view >
				<image src="../../static/icon/fx.png" mode=""></image>
				<button open-type='share' class="btn-share">分享</button>
			</view>
			<view class="" @click="but">
				<image src="../../static/icon/pl.png" mode=""></image>
				<text>评论{{contentList.length}}</text>
			</view>
			<view class="" @click="dianzanNews">
				<image v-if="dianzanShow==false" src="../../static/icon/dz.png" mode=""></image>
				<image v-if="dianzanShow==true" src="../../static/icon/active_dz.png" mode=""></image>
				<text>点赞</text>
			</view>
		</view>
	</view>
</template>

<script>
	import head1 from '../../common/head/head'
	export default {
		components: {
			head1
		},
		onLoad(option) {
			this.newId = option.id
			this.getNewDetail(this.newId)
			this.pinglunInfo(this.newId)
		},
		data() {
			return {
				title: '详情',
				demo: {
					top: '',
					height: ''
				},
				newId: "",
				newDetail: [], //新闻详情
				content: '', //评论内容
				contentList: [], //评论内容列表
				dianzanShow: false,
				dianzanShowList: false,
				intetrvalDianzan: false, //允许一天点一次
				intetrvalDianzanInfoList: false //允许一天点一次
			}
		},
		created() {
			const demo = uni.getMenuButtonBoundingClientRect()
			this.demo.top = demo.top
			this.demo.height = demo.height

		},
		methods: {
			// 新闻详情
			getNewDetail(id) {
				this.$myResquest.getNewsDetail({
					messageId: id
				}).then(res => {
					if (res.data.code == 200) {
						this.newDetail = res.data.data
					}
				})
			},
			// 添加评论
			addpinglun(data) {
				let userid = uni.getStorageSync('userId')
				let that = this
				if (data == '' || data == null) {
					uni.showToast({
						title: '评论内容不能为空',
						icon: 'none'
					})
				} else {
					that.$myResquest.addPinglun({
						messageId: that.newId,
						userId: userid,
						content: data
					}).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '发表成功！',
								icon: 'none'
							})
							that.content = ''
							that.pinglunInfo(that.newId)
						}
					})
				}
			},
			// 新闻点赞
			dianzanNews() {
				let that = this
				// 允许一天点一次
				if (that.intetrvalDianzan == false) {
					that.$myResquest.dianzannews({
						messageId: that.newId
					}).then(res=>{
								if (res.data.code == 200) {
									that.dianzanShow = true
									that.intetrvalDianzan = true
									// 一天后刷新一次重新可以点击,返回可以停止该事件
									setInterval(function() {
										that.dianzanShow = false
										that.intetrvalDianzan = false
									}, 3600000)
								}
					})
				}

			},
			// 评论列表点赞
			dianzanInfoList(item, index) {
				let that = this

				// 允许一天点一次
				if (that.intetrvalDianzanInfoList == false && item.status == '') {
					that.$myResquest.dianzaninfoList({
						contentId: item.contentId
					}).then(res => {
						if (res.data.code == 200) {
							that.intetrvalDianzanInfoList = true
							that.contentList[index].status = 'hahha'
							that.contentList[index].rows = that.contentList[index].rows + 1
							// 一天后刷新一次重新可以点击,返回可以停止该事件
							that.intetrvalDianzanInfoList = false
						}
					})
				}

			},
			// 新闻评论信息
			pinglunInfo(newid) {
				let that = this
				that.$myResquest.pingluninfo({
					messageId: newid,
					currentPage: 1,
					pageSize: 5000
				}).then(res => {
					if (res.data.code == 200) {
						that.contentList = res.data.data
					}
				})
				// uni.request({
				// 	url: 'https://www.chuanjianbao.com/buildtreasure/news/comment',
				// 	method: 'POST',
				// 	data: {
				// 		messageId: newid,
				// 		currentPage: 1,
				// 		pageSize: 5000
				// 	},
				// 	success(res) {
				// 		if (res.data.code == 200) {
				// 			that.contentList = res.data.data
				// 		}
				// 	}
				// })
			},
			// 新闻详情分享
			 onShareAppMessage() {
			    const promise = new Promise(resolve => {
			      setTimeout(() => {
			        resolve({
			          title: '川建宝'
			        })
			      }, 2000)
			    })
			    return {
			      title: '川建宝',
			      path: '/page/login/login',
			      promise 
			    }
			  },
			// 分享朋友圈
			onShareTimeline() {

				return {

					title: '四川建筑人的安全管家、服务管家，帮助您实时了解证书动态，招聘求职、法律咨询、继续教育一网打尽',

					query: 'from=pyq',

					imageUrl: '自定义图片路径'

				}

			},
			but() {
				uni.createSelectorQuery().select('.pinglun').boundingClientRect(data => { //目标位置的节点：类class或者id
					uni.createSelectorQuery().select(".pinglun_footer").boundingClientRect(
						res => { //最外层盒子的节点：类class或者id
							uni.pageScrollTo({
								duration: 100, //过渡时间
								// scrollTop:data.top+300 - res.top,//到达距离顶部的top值
								scrollTop: 10000000000000
								//scrollTop:data.top - res.top,//如果置顶
							})
						}).exec()
				}).exec();
			}

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		height: 100%;
		width: 100%;
		position: relative;

		.detail_footer {
			display: flex;
			height: 100rpx;
			background: #ffffff;
			align-items: center;
			justify-content: space-around;
			position: fixed;
			width: 100%;
			bottom: 0;
			z-index: 999;

			view {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: 23rpx;
					font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
					font-weight: 400;
					color: #5f5d5d;
				}

				button {
					background: #ffffff;
					font-size: 23rpx;
					color: #5f5d5d;
					padding: 0;
				}

				button::after {
					border: none;
				}
			}
		}

		.nav_top {
			background: #eeeeef;
		}

		.realTime {
			background-color: #ffffff;
			padding: 26rpx 40rpx;
			margin-top: 132rpx;

			.realTimeTit {
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: center;
				color: #333333;
				line-height: 52rpx;
				padding: 40rpx 0;
				box-sizing: border-box;
			}

			.realTimeBot {
				display: flex;
				margin-top: 25rpx;
				margin-bottom: 15rpx;
				align-items: center;
				color: #999999;

				image {
					width: 31rpx;
					height: 18rpx;
					margin: 0 25rpx;
				}
			}

			.line {
				width: 670rpx;
				height: 1rpx;
				background: #e5e5e5;
			}

			.actile {
				width: 667rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #333333;
				line-height: 56rpx;
				padding: 20rpx 0;
			}


		}

		.pinglun {
			width: 100%;
			padding: 0 40rpx 100rpx;
			box-sizing: border-box;
			background: #f7f7f7;

			.pinglun_title {
				font-size: 23rpx;
				font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
				font-weight: 700;
				text-align: left;
				color: #5f5d5d;
				height: 130rpx;
				line-height: 130rpx;

			}

			.pinglun_main {
				display: flex;
				justify-content: space-between;
				margin-bottom: 33rpx;

				.pinglun_main_left {
					display: flex;

					image {
						width: 63rpx;
						height: 63rpx;
						margin-right: 24rpx;
						border-radius: 50%;
					}

					.pinglun_main_lr {
						width: 520rpx;
						font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
						font-weight: 700;
						text-align: left;
						color: #5f5d5d;

						.t_tit {
							font-size: 23rpx;
						}

						.t_content {
							font-size: 26rpx;

						}
					}
				}

				.pinglun_main_right {
					display: flex;

					image {
						width: 32rpx;
						height: 32rpx;
					}

					text {
						font-size: 23rpx;
						font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
						font-weight: 700;
						text-align: left;
						color: #49b3af;
						margin-left: 10rpx;
					}
				}
			}

			.pinglun_footer {
				position: relative;
				background: #ffffff;
				padding: 27rpx;
				box-sizing: border-box;
				margin-top: 44rpx;

				textarea {
					width: 674rpx;
					height: 233rpx;
				}

				view {
					position: absolute;
					bottom: 18rpx;
					right: 18rpx;
					width: 176rpx;
					height: 48rpx;
					background: #49b3af;
					border-radius: 24rpx;
					text-align: center;
					line-height: 48rpx;

					font-size: 23rpx;
					font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
					font-weight: 700;
					color: #fefefe;
					letter-spacing: 4.63rpx;
					z-index: 99;
				}
			}
		}
	}
</style>
